<template>
  <div class='souce-main'>
    <h2><el-button size='small' @click='goBack'><i class='el-icon-back'></i>返回</el-button>{{name}}</h2>
    <div class='content'>
      <div class='content-menu'>
        <el-button class='start' round>开始</el-button>
        <ul>
          <li v-for='(item, index) in flowList' :key='index' @click='goLink(item,index)'>
            <svg-icon icon-class="more"></svg-icon>
            <div :class="{'active': active===index}">
              <h3>{{item.name}}</h3>
              <div v-if='item.state===1'>
                <p>执行成功</p>
                <p><i class="el-icon-success"></i></p>
              </div>
              <div v-else>
                <p>执行失败</p>
                <p><i class="el-icon-warning"></i></p>
              </div>
            </div>
          </li>
        </ul>
        <el-button class='end' round>结束</el-button>
      </div>
      <div class='content-main'>
        {{content}}
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        name: '任务流程拓扑图',
        content: '增量数据抓取',
        active: 0,
        flowList: [
          {
            name: '增量数据抓取',
            state: 1
          },
          {
            name: 'DSB数据处理',
            state: 1
          },
          {
            name: 'Filter数据处理',
            state: 1
          },
          {
            name: 'kafka集群',
            state: 1
          },
          {
            name: 'ES集群',
            state: 2
          }
        ]
      }
    },
    created() {
      this.name = this.$route.query.name
    },
    methods: {
      goBack() {
        this.$router.go(-1)
      },
      goLink(row, index) {
        this.content = row.name
        this.active = index
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .souce-main {
    padding: 0 20px 20px 20px;
    color: #666;
    h2 {
      height: 56px;
      line-height: 56px;
      color: #333;
      font-weight: normal;
      font-size: 18px;
      .el-button {
        font-size: 14px;
        padding: 8px 9px;
        margin-right: 12px;
        i {
          margin-right: 3px;
        }
      }
    }
    .content {
      background: #fff;
      text-align: center;
      padding: 10px 20px 20px 20px;
      .content-menu {
        width: 100%;
        height: 126px;
        padding: 16px 80px;
        border-bottom: 1px solid #ededed;
        .start {
          float: left;
          margin-left: -80px;
          margin-top: 25px;
          background-color: #5785f0;
          color: #fff;
        }
        .end {
          float: right;
          margin-right: -80px;
          margin-top: 25px;
          background-color: #5785f0;
          color: #fff;
        }
        ul li {
          float: left;
          height: 90px;
          list-style: none;
          width: 19.6%;
          .svg-icon {
            float: left;
            width: 29%;
            text-align: center;
            margin-top: 25px;
            font-size: 40px;
            color: #5785f0;
          }
          &>div {
            float: right;
            height: 88px;
            border-radius: 10px;
            border: 1px solid #ccc;
            font-size: 12px;
            padding: 10px 0;
            width: 70%;
            cursor: pointer;
            &:hover {
              box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.16);
              border-color: #009ce3;
            }
            &.active {
              box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.16);
              border-color: #009ce3;
            }
            i.el-icon-success {
              color: #1bb393;
            }
            i.el-icon-warning {
              color: #eb6262;
            }
            p {
              line-height: 22px;
              color: #999999;
            }
            h3 {
              line-height: 22px;
              font-size: 12px;
              color: #666;
            }
          }
        }
      }
      .content-main {
        padding-top: 20px;
        text-align: center;
      }
    }
  }
</style>